<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="~{common/head}"></div>
</head>
<body>

<div class="w_100" id="body">
    <el-container>
        <el-header class="bg_white flex_row_cc">
            <el-button type="danger" @click="goto_add()">添加</el-button>
            <el-button type="danger" @click="goto_add()">导入</el-button>
            <div class="flex_fill p_row_10">
                <el-form :inline="true">
                    <el-form-item label="RTU名称" style="margin-bottom:0px;">
                        <el-input v-model="param.name" placeholder="RTU名称"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:0px;">
                        <el-button type="primary" @click="do_search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <i class="fa fa-refresh color_blue font_big" @click="refresh()" ></i>
        </el-header>
        <el-main>
            <el-table :data="rows_device" border>
                <el-table-column prop='id' label="id">
                </el-table-column>
                <el-table-column prop='name' label="名称">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" @change="change_name(scope)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop='rtu_name' label="Rtu名称">
                </el-table-column>
                <el-table-column prop='state' label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==1">
                            在线
                        </span>
                        <span v-if="scope.row.state==0">
                            离线
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next,total"
                    :current_page="p"
                    @current-change='change_p'
                    :page-size="20"
                    :total="all_count">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script>
	var app;
	$(document).ready(
	    function()
	    {
		    app=new Vue(root);
	    }
	);
	var root={
		el:'#body',
		data:
		{
		    param:{},
			rows_device:[],
			p:1,
			all_count:1,
			all_page:1,
		},
		methods:
		{
			refresh:function()
			{
				location.reload();
			},
			goto_add:function()
			{
				parent.xadmin.add_tab('添加游戏','{:U("Game/add_game")}');
			},
			msg:function(msg)
			{
				this.$alert(msg, '提示', {
					confirmButtonText: '确定',
					callback: action => {
					}
				});
			},
			list_usermode:function()
			{
				var thiss=this;
				var condition=
				{
					deleted:'0',
				};
				$.ajax(
				{
					url:"{:U('Service/flist')}",
					type:'POST',
					data:{
						table:'usermode',
						condition:JSON.stringify(condition),
					},
					dataType:'json',
					success:function(res)
					{
						console.log(res.data);
						if(res.code==1)
						{
							thiss.rows_usermode=res.data;
						}
						else
						{
							thiss.msg(res.msg);
						}
					}
				}
				);
			},
			get_data:function()
			{
				var thiss=this;
				$.ajax(
				{
					url:"/service/list_device",
					type:'POST',
					data:{
					},
					dataType:'json',
					success:function(res)
					{
						console.log(res.data);
						if(res.code==1)
						{
							thiss.rows_device=res.data;
						}
						else
						{
							thiss.msg(res.msg);
						}
					}
				}
				);
			},
			get_all_page:function()
			{
				var thiss=this;
				var condition=
				{
					name:['like','%'+(thiss.param.name==null?'':thiss.param.name)+'%'],
					deleted:'0',
				};
				$.ajax(
				{
					url:"{:U('Service/fcount')}",
					type:'POST',
					data:{
						table:'game',
						condition:JSON.stringify(condition),
					},
					dataType:'json',
					success:function(res)
					{
						console.log(res.data);
						if(res.code==1)
						{
							thiss.all_count=parseInt(res.data);
							thiss.all_page=thiss.all_count%20>0?(parseInt(thiss.all_count/20)+1):parseInt(thiss.all_count/20);
						}
						else
						{
							thiss.msg(res.msg);
						}
					}
				}
				);
			},
			change_p:function(e)
			{
				console.log(e);
				var thiss=this;
				thiss.p=parseInt(e);
				thiss.get_data();
			},
			change_name:function(scope)
			{
				var thiss=this;
				$.ajax(
				{
					url:"service/update_name",
					type:'POST',
					data:{
						device_id:scope.row.id,
						name:scope.row.name,
					},
					dataType:'json',
					success:function(res)
					{
						console.log(res.data);
						if(res.code==0)
						{
							thiss.msg(res.msg);
						}
						else
						{
//							location.reload();
						}
					}
				}
				);
			},
			do_edit:function(scope)
			{
				parent.xadmin.add_tab('编辑游戏','{:U("Game/add_game")}?id='+scope.row.id);
			},
			do_delete:function(scope)
			{
				var thiss=this;
				thiss.$confirm('确定删除吗', '提示',
				{
					confirmButtonText: '确定',
					callback: action =>
					{
						if(action=='confirm')
						{
							scope.row.deleted='1';
							$.ajax(
							{
								url:"{:U('Service/fupdate')}",
								type:'POST',
								data:{
									table:'game',
									row:JSON.stringify(scope.row),
								},
								dataType:'json',
								success:function(res)
								{
									console.log(res.data);
									if(res.code==0)
									{
										thiss.msg(res.msg);
									}
									else
									{
										location.reload();
									}
								}
							}
							);
						}
					}
				}
				);
			},
			do_search:function()
			{
				var thiss=this;
				thiss.p=1;
				thiss.get_data();
			}
		},
		mounted:function()
		{
			console.log('mounted');
			var thiss=this;
			thiss.get_data();
		}
	};
	function get_users(rows_user){
		console.log(rows_user);
	}
</script>
</body>
</html>